<template lang="">
    <div>
        <div class="d-flex mt-2 justify-content-between align-items-center">
      <span>剩余{{thing}}个</span>

      <ul class="nav nav-pills">
        <li class="nav-item">
          <button class="nav-link" :class="{'active':status.all.isActive}" @click="fn(status.all.num)">全部</button>
        </li>
        <li class="nav-item">
          <button class="nav-link" :class="{'active':status.unfinished.isActive}" @click="fn(status.unfinished.num)">未完成</button>
        </li>
        <li class="nav-item">
          <button class="nav-link" :class="{'active':status.finished.isActive}" @click="fn(status.finished.num)">已完成</button>
        </li>
      </ul>

      <button type="button" class="btn btn-danger" @click="clearFinished">清除已完成</button>
    </div>
    </div>
</template>
<script>
export default {
  props: ['event'],
  data() {
    return {
      status: {
        all: {num:0, isActive:true}, 
        unfinished: {num:1, isActive:false}, 
        finished: {num:2, isActive:false},
        },
    }
  },
  computed: {
    thing() {return this.event}
  },
  // methods放事件的回调函数
  methods: {
    fn(num) {
      for (const key in this.status) {
        this.status[key].isActive = this.status[key].num === num ? true : false
      }
      this.$emit('updateFatherlist', num)
    },
    clearFinished() {
      this.$emit('clearFatherlist')
    }
  },
}
</script>
<style>
</style>